<!DOCTYPE html>
<html lang="en">
<head>
    <!--
      @author 温在贝
      @Description: 广义货币增长率
    -->
    <meta charset="UTF-8">
    <title>广义货币增长率</title>
    <!-- 引入Jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <!-- 引入Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- 引入BootStrap-table -->
    <link rel="stylesheet" href="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.css">
    <script src="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.js"></script>

    <!-- 引入Bootstrap-paginator -->
    <script src="../assets/libs/bootstrap-paginator-master/build/bootstrap-paginator.min.js"></script>

    <!-- 引入Echarts -->
    <script src="../assets/libs/echarts/echarts.min.js"></script>
    <style>
        .th-inner{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <ul class="nav nav-tabs">
                <li role="presentation" id="tableTag"><a href="javascript:;" onclick="showTable()">&nbsp;<span class="glyphicon glyphicon-th-large"></span>&nbsp;</a></li>
                <li role="presentation" id="imageTag"><a href="javascript:;" onclick="showImage()">&nbsp;<span class="glyphicon glyphicon-tasks"></span>&nbsp;</a></li>
            </ul>
        </div>

        <div id="tableView">
            <div class="page-header" style="text-align: center;">
                <h3>广义货币增长率</h3>
                <br>
                <h4 style="margin-top: -20px;">Growth Rate of Money and Quasi Money</h4>
            </div>

            <div style="text-align: right;">单位:&nbsp;%</div>

            <table id="tableData" style="text-align: center"></table>
        </div>

        <div id="imageView">
            <div class="page-header" style="text-align: center;">
                <h3>广义货币增长率柱状图</h3>
                <br>
                <h4 style="margin-top: -20px;">Growth Rate of Money and Quasi Money</h4>
            </div>

            <div class="panel" style="margin-top: 1.5em;">
                <!--<div style="text-align: right;">单位:&nbsp;%</div>-->
                <div id="main" style="width: 100%;height:400px;"></div>
            </div>
        </div>

        <div style="color: #959595; margin-top: 1.5em;">*此数据仅展现最近五年，若需全部数据请点击&nbsp;<a href="#" class="btn btn-info btn-xs">
            <span class="glyphicon glyphicon-save"></span> 下载
        </a></div>


        <!-- <div style="text-align: right;"><div id="page"></div></div> -->
    </div>
    <script>
        $(function(){
            $('#imageView').hide();
            $('#tableTag').attr('class','active');
        })

        function showTable() {
            $('#tableView').show();
            $('#imageView').hide();
            $('#tableTag').attr('class','active');
            $('#imageTag').removeClass('active');
        }

        function showImage() {
            $('#imageView').show();
            $('#tableView').hide();
            $('#imageTag').attr('class','active');
            $('#tableTag').removeClass('active');
        }

        $('#tableData').bootstrapTable({
            striped: true,
            columns: [
                {
                    field: 'country',
                    title: '国家'
                },
                {
                    field: 'year1',
                    title: '2000年'
                },
                {
                    field: 'year2',
                    title: '2005年'
                },
                {
                    field: 'year3',
                    title: '2010年'
                },
                {
                    field: 'year4',
                    title: '2013年'
                },
                {
                    field: 'year5',
                    title: '2014年'
                },
                {
                    field: 'year6',
                    title: '2015年'
                },
            ],
            data: [
	    {
	    	country: '阿尔巴尼亚',
	    	year1: '12.0',
	    	year2: '14.1',
	    	year3: '12.4',
	    	year4: '2.2',
	    	year5: '4.01',
	    	year6: '1.9',
	    }, 
	    {
	    	country: '爱沙尼亚',
	    	year1: '30.4',
	    	year2: '25.5',
	    	year3: '1.9',
	    	year4: '-',
	    	year5: '-',
	    	year6: '-',
	    },
	    {
	    	country: '波黑',
	    	year1: '11.2',
	    	year2: '18.6',
	    	year3: '7.2',
	    	year4: '2.1',
	    	year5: '2.4',
	    	year6: '2.2',
	    },
	    {
	    	country: '保加利亚',
	    	year1: '30.8',
	    	year2: '21.4',
	    	year3: '6.3',
	    	year4: '8.9',
	    	year5: '1.1',
	    	year6: '8.76',
	    }, 
	    {
	    	country: '波兰',
	    	year1: '11.5',
	    	year2: '15.0',
	    	year3: '8.8',
	    	year4: '6.2',
	    	year5: '8.1',
	    	year6: '9.1',
	    }, 
	    {
	    	country: '黑山',
	    	year1: '-',
	    	year2: '-',
	    	year3: '-',
	    	year4: '-',
	    	year5: '-',
	    	year6: '-',
	    }, 
	    {
	    	country: '捷克',
	    	year1: '16.0',
	    	year2: '10.9',
	    	year3: '1.8',
	    	year4: '5.8',
	    	year5: '5.9',
	    	year6: '7.9',
	    },
	    {
	    	country: '克罗地亚',
	    	year1: '29.0',
	    	year2: '10.5',
	    	year3: '12.6',
	    	year4: '-14.5',
	    	year5: '0.8',
	    	year6: '4.6',
	    },
	    {
	    	country: '罗马尼亚',
	    	year1: '40.8',
	    	year2: '20.0',
	    	year3: '6.8',
	    	year4: '8.8',
	    	year5: '8.3',
	    	year6: '9.3',
	    },
	    {
	    	country: '立陶宛',
	    	year1: '16.5',
	    	year2: '33.0',
	    	year3: '-',
	    	year4: '-',
	    	year5: '-',
	    	year6: '-',
	    },
	    {
	    	country: '拉脱维亚',
	    	year1: '27.0',
	    	year2: '38.3',
	    	year3: '-',
	    	year4: '-',
	    	year5: '-',
	    	year6: '-',
	    },
	    {
	    	country: '马其顿',
	    	year1: '22.2',
	    	year2: '15.7',
	    	year3: '12.1',
	    	year4: '5.1',
	    	year5: '10.6',
	    	year6: '6.9',
	    },
	    {
	    	country: '塞尔维亚',
	    	year1: '160.8',
	    	year2: '42.1',
	    	year3: '12.8',
	    	year4: '4.5',
	    	year5: '8.6',
	    	year6: '7.1',
	    },
	    {
	    	country: '斯洛伐克',
	    	year1: '15.1',
	    	year2: '3.5',
	    	year3: '-',
	    	year4: '-',
	    	year5: '-',
	    	year6: '-',
	    },
	    {
	    	country: '斯洛文尼亚',
	    	year1: '-',
	    	year2: '-',
	    	year3: '-',
	    	year4: '-',
	    	year5: '-',
	    	year6: '-',
	    },
	    {
	    	country: '匈牙利',
	    	year1: '12.6',
	    	year2: '14.7',
	    	year3: '4.2',
	    	year4: '7.8',
	    	year5: '2.4',
	    	year6: '5.7',
	    }

	    ]
        });

        var all = {
            "data": [
                [12.0,30.5,30.8,11.6,0,16.0,29.1,27.0,16.5,40.8,22.2,160.8,15.2,0,12.6,11.3],
                [14.1,25.5,21.5,15.0,0,11.0,10.6,38.3,33.1,20.0,15.7,42.2,3.6,0,14.7,18.7],
                [12.5,2.0,6.3,8.8,0,1.9,12.6,0,0,6.8,12.1,12.9,0,0,4.3,7.2],
                [2.3,0,8.9,6.2,0,5.8,-14.6,0,0,8.8,5.2,4.6,0,0,7.8,2.2],
                [4.0,0,1.1,8.2,0,5.9,0.9,0,0,8.3,10.6,8.7,0,0,2.5,2.4],
                [1.9,0,8.8,9.1,0,8.0,4.7,0,0,9.4,6.9,7.2,0,0,5.8,2.3]
            ],
            "countrys": ['阿尔巴尼亚','爱沙尼亚','波黑','保加利亚','波兰','黑山','捷克','克罗地亚','罗马尼亚','立陶宛','拉脱维亚','马其顿','塞尔维亚','斯洛伐克','斯洛文尼亚','匈牙利'],
            "years": ["2000年", "2005年", "2010年", "2013年", "2014年", "2015年"]
        };

        var option = {
            timeline: {
                axisType: 'category',
                autoPlay: true,
                playInterval: 2000,
                data: all.years
            },
            options: [{
                tooltip: {
                    trigger: 'axis'
                },
                title:{
                    subtext:'数据来源'
                },
                calculable: true,
                grid: {
                    y: 100,
                    y2: 100
                },
                xAxis: [{
                    type: 'category',
                    axisLabel: {
                        interval: 0
                    },
                    data: all.countrys
                }],
                yAxis: [{
                    type: 'value',
                    name: '%'
                }],
                series: [{
                    name: '银行资本充足率',
                    type: 'bar',
                    data: all.data[0]
                }]
            },
                {
                    series: [{
                        data: all.data[1]
                    }]
                },
                {
                    series: [{
                        data: all.data[2]
                    }]
                },
                {
                    series: [{
                        data: all.data[3]
                    }]
                },
                {
                    series: [{
                        data: all.data[4]
                    }]
                },
                {
                    series: [{
                        data: all.data[5]
                    }]
                }
            ]
        };
        var myChart = echarts.init(document.getElementById('main'));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>